<template>
    <div class="header-nav-menu slide-up">
        <div class="cont">
            <ul class="header-nav-ul">
                <li class="first">
                    <div class="head-nav-inner">
                        <div class="figure">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7e78629420a392da6fd3e34dae9fac5d.png?thumb=1&w=200&h=138&f=webp&q=90" alt="">
                        </div>
                        <div class="title">小米透明电视</div>
                        <div class="price">2699起</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'HeadNavMenu'
}
</script>

<style lang="less" scoped>
.header-nav-menu {
    position: absolute;
    z-index: 3;
    width: 100%;
    border-top: 1px solid transparent;
    transition: height .3s linear, border-top .3s linear;
    background-color: #fff;
    box-shadow: 0 3px 4px rgb(0 0 0 / 18%);
    overflow: hidden;

    &.slide-up {
        height: 0;
        border: 0;
    }

    &.slide-down {
        height: 229px;
        border-top: 1px solid #e0e0e0;
    }

    .cont {
        position: relative;
        width: 1226px;
        margin: auto;
        height: 229px;

        .header-nav-ul {
            width: 100%;
            height: 100%;
            font-size: 12px;
            color: #333;

            li {
                position: relative;
                float: left;
                width: 180px;
                padding: 35px 12px 0;
                text-align: center;

                &:not('.first'):before {
                    position: absolute;
                    left: 0;
                    top: 35px;
                    z-index: 1;
                    width: 1px;
                    height: 100px;
                    content: "";
                    background-color: #e0e0e0;
                }

                .head-nav-inner {
                    color: #757575;
                    font-size: 12px;

                    .figure {
                        width: 160px;
                        height: 110px;
                        margin: 0 auto 16px;
                        text-align: center;

                        img {
                            width: 160px;
                            height: 110px;
                        }
                    }

                    .title {
                        color: #333;
                        font-size: 12px;
                    }

                    .price {
                        margin: 0;
                        line-height: 20px;
                        color: #ff6700;
                        font-size: 12px;
                    }
                }
            }
        }
    }
}
</style>